很早我们就可以在 HTML 文档中写 <custome-element></custom-element> 这样的自定义名称标签。但是浏览器对于不认识的标签一律当成一个普通的行内元素处理，没有相关语义。虽然我们能用 JavaScript 代码给它添加一些功能，但是并没有生命周期相关的函数供我们做一些初始化和销毁的处理。
通过浏览器提供的 Custom elements api 我们能定义一个自定义元素，并且告知 HTML 解析器如何正确地构造一个元素，以及在该元素的属性变化时执行相应的处理。
定义新元素
比如我们想要像 <date-string ln="zh"></data-string> 这样使用一个显示日期字符串的标签，并且在 ln 属性为 zh 时显示中文格式，en 时显示英文格式。
首先我们定义一个类 DateString 派生自 HTMLElement。
class DateString extends HTMLElement {
constructor() {
super()
return
}
// 返回需要监听的属性，当属性值改变的时候会调用 attributeChangedCallback 这个方法
static get observedAttributes () {
return ['ln']
}
attributeChangedCallback (name, oldValue, newValue) {
this.updateRendering (newValue)
}
// 元素插入到文档中时调用
connectedCallback() {
const ln = this.getAttribute('ln')
this.updateRendering(ln)
}
// 元素从文档中移除时调用
disconnectedCallback () {
window.clearInterval(this.interval)
}
updateRendering (ln = 'zh') {
// 一个比较好的实践就是在渲染时，检查元素的 ownerDocument.defaultView, 如果不存在则什么都不干
if (!this.ownerDocument.defaultView) {
return
}
if (this.interval) {
window.clearInterval(this.interval)
}
this.interval = setInterval(() => {
if (ln === 'zh') {
this.innerHTML = new Date().toLocaleString()
} else {
this.innerHTML = new Date().toString()
}
}, 1000)
}
}然后调用 customElements.define() 注册这个自定义元素，设置属性并插入到 body 中。
customElements.define("date-string", DateString)
const dateStr = document.createElement('date-string')
dateStr.setAttribute('ln', 'zh')
document.body.appendChild(dateStr)也可以用直接调用构造函数创建元素
const dateStr = new DateString()
dateStr.setAttribute('ln', 'zh')
document.body.appendChild(dateStr)自定义元素可以使用符合规范的任意属性名，下面说的派生内置元素类型要自定义属性，则要用 data-*
上面代码那样设置属性很繁琐，我们可以做一个属性映射，以期望 dateStr.ln = 'zh' 这样赋值
class DateString extends HTMLElement {
...
get ln () {
return this.getAttribute('ln')
}
set ln (value) {
this.setAttribute('ln', value)
}
}元素升级
除了像上面那样用 JavaScript 代码创建元素并添加到 body 下面，也可以直接在 HTML 写自定义元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<date-string ln="zh"></date-string>
<script>
class DateString extends HTMLElement {
...
}
customElements.define("date-string", DateString)
</script>
</body>
</html>上面的代码依然正常工作。首先浏览器正常解析文档，遇到 <date-string> 标签时，把它当做一个普通的行内元素对待，实际上是 HTMElement 类型(如果标签的名称中没有中划线，<unknow>，那么则是 HTMLUnknownElement 类型实例)。当 <script> 标签中的代码执行后，注册了名为 date-string 的自定义元素，浏览器再对文档中的 data-string 元素做升级处理，调用相应的生命周期函数。
需要注意的是，只有插入到文档中的元素才会升级：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<date-string ln="zh" id="dateStr"></date-string>
<script>
const dateStr = document.getElementById('dateStr')
const other = document.createElement('date-string')
console.log(dateStr instanceof HTMLElement) // true
console.log(other instanceof HTMLElement) // true
class DateString extends HTMLElement {}
customElements.define("date-string", DateString)
console.log(dateStr instanceof DateString) // true
console.log(other instanceof DateString) // false
// 插入到文档中后，other 元素升级为自定义元素类型 DateString
document.body.appendChild(other)
console.log(other instanceof DateString) // true
</script>
</body>
</html>派生内置元素类型
除了从 HTMLElement 派生自定义元素，我们还可以从 HTMLButtonElement, HTMLDivElement 等内置元素类型派生自定义元素。这么做的好处是，可以保留内置元素的语义化功能。比如，HTMLButtonElement 有 active 状态，通过按 tab 键可以使 button 元素获得焦点，然后按回车键相当于点击 button 元素。现在我们从 HTMLButtonElement 派生一个自定义的按钮，并在点击的时候改变背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button is="colored-button">colored</button>
<script>
class ColoredButton extends HTMLButtonElement {
constructor () {
super();
this.addEventListener('click', () => {
let ox = Math.floor(Math.random()*255).toString(16)
this.style.background = `#${ox.repeat(3)}`
})
}
}
customElements.define('colored-button', ColoredButton, {
extends: 'button'
})
</script>
</body>
</html>这个按钮在行为上与内置的 button 一样, 可以获取焦点，提交表单，也有禁用属性等。
派生内置元素与自定义元素略微不同，调用 customElements.define 时要传入第三个参数表明是从那个元素派生，这里使用的名称是 'button' 即标签名，因为浏览器是靠识别标签名来提供语义和默认行为，基于这一点，使用的时候也是用的原本的标签名 button，然后再给一个 is 属性指定自定义元素的名称。
通过 document.createElement 创建元素时也有不同
const coloredButton = document.createElement('button', {
is: 'colored-button'
})也可以直接调用构造函数创建
const coloredButton = new ColoredButton
console.log(coloredButton.localName) // => 'button'
console.log(coloredButton.getAttribute(is)) // => 'colored-button'注：直到 chrome 61 版本，扩展内置元素依然在开发中。参见链接
构造函数的一些限制
自定义元素的构造函数必须遵循如下限制
- 构造函数中不能调用 document.write() 和 document.open()
- 不能访问元素的属性和子元素，因为在元素未升级的情况下(元素还未插入文档中)，不存在属性和子元素
- 初始化工作要尽量推迟到 connectedCallback 中，尤其是涉及获取资源或渲染的工作。但是 connectedCallback 可能会调用多次(每次插入到文档中时都会调用)，一次性的初始化工作需要自己设置防护措施。
命名限制
自定义元素的命名限制如下
- 必须以小写字母开头
- 必须有至少一个中划线
- 允许小写字母，中划线，下划线，点号，数字
- 允许部分 Unicode 字符，所以
<h-?></h-?>这样也是可以的. -
不允许下面这些名称
- annotation-xml
- color-profile
- font-face
- font-face-src
- font-face-uri
- font-face-format
- font-face-name
- missing-glyph
如果名称出现不允许的字符， customElements.define 会报错。
生命周期函数
自定义元素可以定义特殊生命周期钩子，以便在其存续的特定时间内运行代码。
- constructor 创建或升级元素的一个实例。用于初始化状态、设置事件侦听器。
- connectedCallback 元素每次插入到 DOM 时都会调用。可用于获取资源或渲染。
- disconnectedCallback 元素每次从 DOM 中移除时都会调用。用于运行清理代码。
- attributeChangedCallback 属性添加、移除、更新或替换。仅对 observedAttributes 中返回的属性有效。
- adoptedCallback 自定义元素被移入新的 document 时调用。
响应回调是同步的。如果有人对您的元素调用 el.setAttribute(...)，浏览器将立即调用 attributeChangedCallback()。 同理，从 DOM 中移除元素（例如用户调用 el.remove()）后，您会立即收到 disconnectedCallback()。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。